import { defineComponent, ref } from "vue";
import styles from "./tags.module.less";
import { useStore as useTagsStore } from "@/store/tags";
import useNavigator from "@/hooks/useNavigator";
import PopupMenu from "@/components/index/tags/popupMenu/popupMenu";
export default defineComponent({
  name: 'Tags',
  setup(props: any, { emit }) {
    const navigator = useNavigator();
    const tagsStore = useTagsStore();
    const tabs = tagsStore.tags;
    // 遍历路由将默认显示的固定标签渲染
    const eachSetAffix = (e: any) => {
      e.forEach((x: any) => {
        if (x?.meta?.affix) {
          tagsStore.addAffixTag(x);
        } else if (x.children && x.children.length > 0) {
          eachSetAffix(x.children);
        }
      })
    }
    eachSetAffix(navigator.options.routes[0].children);
    // 标签变更,action为remove时即为关闭标签
    const tabsEdit = (targetKey: string, action: string) => {
      if (action === 'remove') {
        if (targetKey === tagsStore.tag) {
          tagsStore.removeTag(targetKey);
        } else {
          tagsStore.removeTag(targetKey, tagsStore.tag);
        }
      }
    }
    // 标签切换
    const tagChange = (e: string) => {
      const { name, query, params } = tagsStore.tags.find(x => x.name === e);
      navigator.push({
        name,
        query,
        params,
      })
    }
    // 右键点击显示小菜单
    const onContextmenuHandler = (page: any, e: any) => {
      if (page.name) {
        e.preventDefault();
        e.meta = page.name;
        menuVisible.value = true;
      }
    }
    // 小菜单内容
    const ctxMenuList = ref(
      [
        { key: '1', text: '关闭左侧' },
        { key: '2', text: '关闭右侧' },
        { key: '3', text: '关闭其他' },
        { key: '4', text: '关闭全部' },
      ]
    );
    // 小菜单显示
    const menuVisible = ref(false);
    // 关闭左侧
    const closeLeft = (name: string) => {
      let idx = tagsStore.tags.findIndex(x => x.name === name);
      tagsStore.tags.splice(1, idx - 1);
      const { name: name1, query, params } = tagsStore.tags.find(x => x.name === name);
      navigator.push({
        name: name1,
        query,
        params,
      })
    }
    // 关闭右侧
    const closeRight = (name: string) => {
      let idx = tagsStore.tags.findIndex(x => x.name === name);
      tagsStore.tags.splice(idx + 1, tagsStore.tags.length - idx - 1);
      const { name: name1, query, params } = tagsStore.tags.find(x => x.name === name);
      navigator.push({
        name: name1,
        query,
        params,
      })
    }
    // 关闭其他
    const closeOthers = (name: string) => {
      let idx = tagsStore.tags.findIndex(x => x.name === name);
      tagsStore.tags.splice(1, idx - 1);
      let idx2 = tagsStore.tags.findIndex(x => x.name === name);
      tagsStore.tags.splice(idx2 + 1, tagsStore.tags.length - idx2 - 1);
      const { name: name1, query, params } = tagsStore.tags.find(x => x.name === name);
      navigator.push({
        name: name1,
        query,
        params,
      })
    }
    // 关闭全部
    const closeAll = (name: string) => {
      tagsStore.tags.splice(1,tagsStore.tags.length);
      navigator.push({
        name: 'home',
      })
    }
    // 小菜单项点击
    const onMenuSelect = (e: { key: any, target: any, meta: any }) => {
      switch (e.key) {
        case '1': closeLeft(e.meta); break;
        case '2': closeRight(e.meta); break;
        case '3': closeOthers(e.meta); break;
        case '4': closeAll(e.meta); break;
        default: break
      }
    }
    // 标签组
    const Tags = () => (
      <>
        <div class={styles.container}>
          <a-tabs
            size="small"
            type="editable-card"
            hideAdd={true}
            activeKey={tagsStore.tag}
            class={styles.tags}
            onEdit={(targetKey: string, action: string) => { tabsEdit(targetKey, action) }}
            onChange={(e: string) => { tagChange(e) }}
          >
            {
              tabs.map(x => x && x.name &&
                <a-tab-pane
                  key={x.name}
                  tab={(
                    <div onContextmenu={(e: any) => { onContextmenuHandler(x, e) }}>
                      {
                        x.meta.icon && x.name === tagsStore.tag &&  <x.meta.icon />
                      }
                      <span class={styles.title}>
                        {x.meta.title}
                      </span>
                    </div>
                  )}
                  closable={!x.meta.affix}
                >
                </a-tab-pane>
              )
            }
          </a-tabs>
        </div>
        <PopupMenu itemList={ctxMenuList.value} v-model={[menuVisible.value, 'visible']} onSelect={(e: any) => onMenuSelect(e)} />
      </>
    )
    return {
      Tags,
    }
  },
  render() {
    return <this.Tags></this.Tags>
  },
})